<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-progress"
		:class="_classes"
		:style="_styles"
	>
		<view class="pure-progress__bar">
			<view
				class="pure-progress__pivot"
				v-if="showPivot"
			>
				<slot>
					{{ pivotText ? pivotText : `${percent}%` }}
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-progress-theme: ${getThemeValue(_props.theme)};`);

		// 进度
		array.push(`--pure-progress-percent: ${_props.percent || 0}%;`);

		// 粗细
		if (_props.size) array.push(`--pure-progress-size: ${_props.size};`);

		// 进度条颜色
		if (_props.color) array.push(`--pure-progress-color: ${_props.color};`);

		// 轨道颜色
		if (_props.trackColor) array.push(`--pure-progress-track-color: ${_props.trackColor};`);

		// 圆角大小
		if (_props.radius) array.push(`--pure-progress-border-radius: ${_props.radius};`);

		// 进度文字背景
		if (_props.pivotColor) array.push(`--pure-progress-pivot-color: ${_props.pivotColor};`);

		// 进度文字颜色
		if (_props.textColor) array.push(`--pure-progress-text-color: ${_props.textColor};`);

		return array;
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
